<template>
  <el-upload
   action="http://localhost:8082/employee/pics"
   multiple
   :limit="1"
   :file-list="fileList"
   :on-success="handleSuccess"
   :before-remove="beforeRemove"
   list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  name: 'ImgUpload',
  data () {
    return {
      fileList: [],
      url: ''
    }
  },
  // props: ['fileList'],
  methods: {
    beforeRemove (file, fileList) {
      return this.$confirm('此操作将会永久删除该文件，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 当该组件接收到后端返回的成功信息后，会触发父组件EditForm的onUpload事件
    // 把接收到的url赋给图书信息表单的cover字段
    handleSuccess (response) {
      this.url = response.data
      this.$emit('onUpload')
      this.$message({
        type: 'warning',
        message: '上传成功'
      })
    }
  }
}
</script>

<style scoped>

</style>
